<template>
  <div>
    <div><el-button @click="handleAdd" type="primary">新增</el-button></div>
    <div style="padding-top: 10px">
      <div
        v-for="(item, index) in tenant.connectionStrings"
        :key="index"
        style="padding-top: 5px"
      >
        <el-row :gutter="20">
          <el-col :span="8"
            ><el-row
              ><el-col :span="2">{{ index + 1 }}</el-col>
              <el-col :span="6">名称：</el-col
              ><el-col :span="16"
                ><el-input v-model="item.name"></el-input></el-col></el-row
          ></el-col>
          <el-col :span="14"
            ><el-row
              ><el-col :span="6">数据库：</el-col
              ><el-col :span="18"
                ><el-input v-model="item.value"></el-input></el-col></el-row
          ></el-col>
          <el-col :span="2"
            ><i class="el-icon-delete" @click="() => handleRemove(item, index)">
            </i>
          </el-col>
        </el-row>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="padding-top: 10px">
      <el-button @click="handleCancel" size="small">取消</el-button>
      <el-button type="primary" @click="handleSubmit" size="small"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import { getTenantConnection, updateTenantConnection } from "@/api/tenant";
export default {
  components: {},
  data() {
    return {
      tenant: {
        id: null,
        connectionStrings: "",
      },
      rules: {
        connectionString: [
          {
            required: true,

            message: this.$t("tips.requireItem"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getData() {
      if (!this.id) return;
      getTenantConnection(this.id).then((res) => {
        this.tenant.connectionStrings = res || "";
      });
    },
    handleSubmit() {
      let count = this.tenant.connectionStrings
        ? this.tenant.connectionStrings.length
        : 0;
      if (count == 0) {
        this.$notify({
          title: "提示",
          message: "至少需填写一个连接字符串",
          type: "error",
          position: "bottom-right",
        });
        return;
      }
      let valid = true;
      for (let i = 0; i < count; i++) {
        let connectionString = this.tenant.connectionStrings[i];

        if (!connectionString.name) {
          let tips = "第" + (i + 1) + "行名称为必填";
          this.$notify({
            title: "错误",
            message: tips,
            type: "error",
            position: "bottom-right",
          });
          valid = false;
          break;
        }

        if (!connectionString.value) {
          let tips = "第" + (i + 1) + "行数据地址为必填";
          this.$notify({
            title: "错误",
            message: tips,
            type: "error",
            position: "bottom-right",
          });
          valid = false;
          break;
        }
      }

      if (!valid) return;

      this.saveData();
    },
    saveData() {
      if (!this.id) {
        return;
      }
      updateTenantConnection(
        this.tenant.id,
        this.tenant.connectionStrings
      ).then((res) => {
        this.$notify({
          title: "成功",
          message: "保存成功",
          type: "success",
          position: "bottom-right",
        });
        this.$emit("success", res);
      });
    },
    handleCancel() {
      this.$emit("close");
    },
    handleAdd() {
      if (this.tenant.connectionStrings == null)
        this.tenant.connectionStrings = [];

      this.tenant.connectionStrings.push({
        name: "",
        value: "",
      });
    },
    handleRemove(item, index) {
      this.tenant.connectionStrings.splice(index, 1);
    },
  },
  created() {
    this.getData();
  },
  mounted() {
    this.tenant.id = this.id;
  },
  computed: {},
  props: {
    id: {
      type: String,
      default: null,
    },
  },
};
</script>
<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
